<template>
  <div class="">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item><i class="el-icon-lx-shop"></i> 楼栋管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <el-cascader-panel :options="options" :props="props" @change="panelClick"></el-cascader-panel>
      <el-button type="primary" @click="toAddArea()" v-show="!form.isAdd">添加新小区</el-button>
    </div>

    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item><i class="el-icon-lx-calendar"></i> 详情</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <!-- 显示小区信息 -->
      <el-form class="myform" ref="form1" :model="form.area"
               v-if="currentState == 'editArea' || currentState == 'addArea'"
               label-width="auto">
        <div class="myform-header">
          <el-button type="success" @click="saveArea()" v-show="currentState=='editArea'">保存小区修改</el-button>
          <el-button type="primary" @click="toAddBuilding()" v-show="currentState=='editArea'">添加新楼栋</el-button>
          <el-button type="primary" @click="addArea()" v-show="currentState=='addArea'">确认添加</el-button>
          <el-button type="success" @click="currentState=''" v-show="currentState=='addArea'">取消</el-button>
        </div>
        <el-form-item label="ID" v-show="currentState=='editArea'">
          <el-input v-model="form.area.id" disabled></el-input>
        </el-form-item>
        <el-form-item label="名称">
          <el-input v-model="form.area.name"></el-input>
        </el-form-item>
        <el-form-item label="简述">
          <el-input v-model="form.area.des"></el-input>
        </el-form-item>
        <el-form-item label="负责人">
          <el-input v-model="form.area.leader"></el-input>
        </el-form-item>
        <el-form-item label="楼栋数">
          <el-input v-model="form.area.buildNumber"></el-input>
        </el-form-item>
        <el-form-item label="覆盖面积">
          <el-input v-model="form.area.coveredArea"></el-input>
        </el-form-item>
        <el-form-item label="总户数">
          <el-input v-model="form.area.houseNumber"></el-input>
        </el-form-item>
        <el-form-item label="已入住户数">
          <el-input v-model="form.area.familyNumber"></el-input>
        </el-form-item>
        <el-form-item label="完工日期">
          <el-date-picker type="date" placeholder="选择日期" v-model="form.area.completeDate"></el-date-picker>
        </el-form-item>
        <el-form-item label="备注">
          <el-input type="textarea" :rows="3" v-model="form.area.remark"></el-input>
        </el-form-item>

      </el-form>

      <!-- 显示楼栋信息 -->
      <el-form class="myform" ref="form2" :model="form.building"
               v-if="currentState=='editBuilding'||currentState=='addBuilding' "
               label-width="auto">
        <div class="myform-header">
          <el-button type="success" @click="saveBuilding()" v-show="currentState=='editBuilding'">保存修改</el-button>
          <el-button type="primary" @click="addBuilding()" v-show="currentState=='addBuilding'">确认添加</el-button>
          <el-button type="primary" @click="toAddUnit()" v-show="currentState=='editBuilding'">添加新单元</el-button>
          <el-button type="success" @click="currentState=''" v-show="currentState=='addBuilding'">取消</el-button>
        </div>
        <el-form-item label="ID" v-if="currentState=='editBuilding'">
          <el-input v-model="form.building.id" disabled></el-input>
        </el-form-item>
        <el-form-item label="所属小区" v-if="currentState=='addBuilding'">
          <el-input v-model="form.currentName" disabled></el-input>
        </el-form-item>
        <el-form-item label="名称">
          <el-input v-model="form.building.name"></el-input>
        </el-form-item>
        <el-form-item label="高度">
          <el-input v-model="form.building.high"></el-input>
        </el-form-item>
        <el-form-item label="层数">
          <el-input v-model="form.building.floor"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input type="textarea" :rows="3" v-model="form.building.remark"></el-input>
        </el-form-item>
      </el-form>

      <!-- 显示单元信息 -->
      <el-form class="myform" ref="form3" :model="form.unit" v-if="currentState=='editUnit'||currentState=='addUnit' "
               label-width="auto">
        <div class="myform-header">
          <el-button type="success" @click="saveUnit()" v-show="currentState=='editUnit'">保存修改</el-button>
          <el-button type="primary" @click="toAddHouse()" v-show="currentState=='editUnit'">添加新住房</el-button>
          <el-button type="primary" @click="addUnit()" v-show="currentState=='addUnit'">确认添加</el-button>
          <el-button type="success" @click="currentState=''" v-show="currentState=='addUnit'">取消</el-button>
        </div>
        <el-form-item label="ID" v-if="currentState=='editUnit'">
          <el-input v-model="form.unit.id" disabled></el-input>
        </el-form-item>
        <el-form-item label="所属楼栋" v-if="currentState=='addUnit'">
          <el-input v-model="form.currentName" disabled></el-input>
        </el-form-item>
        <el-form-item label="名称">
          <el-input v-model="form.unit.name"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input type="textarea" :rows="3" v-model="form.unit.remark"></el-input>
        </el-form-item>
      </el-form>

      <!-- 显示住房信息 -->
      <el-form class="myform" ref="form4" :model="form.house"
               v-if="currentState=='editHouse'||currentState=='addHouse' "
               label-width="auto">
        <div v-if="currentState=='editHouse'">
          <el-button type="success" @click="saveHouse()">保存修改</el-button>
          <el-button type="success" @click="toLiveHouse()">家庭入住</el-button>
        </div>
        <div v-if="currentState=='addHouse'">
          <el-button type="primary" @click="addHouse()">确认添加</el-button>
        </div>

        <el-form-item label="ID" v-if="currentState=='editHouse'">
          <el-input v-model="form.house.id" disabled></el-input>
        </el-form-item>
        <el-form-item label="所属单元" v-if="currentState=='addHouse'">
          <el-input v-model="form.currentName" disabled></el-input>
        </el-form-item>
        <el-form-item label="门牌号">
          <el-input v-model="form.house.houseNum"></el-input>
        </el-form-item>
        <el-form-item label="住房状态">
          <el-input v-model="form.house.houseState" disabled></el-input>
        </el-form-item>
        <el-form-item label="所在楼层">
          <el-input v-model="form.house.floorNum"></el-input>
        </el-form-item>
        <el-form-item label="房型">
          <el-input v-model="form.house.houseType"></el-input>
        </el-form-item>
        <el-form-item label="面积">
          <el-input v-model="form.house.houseArea"></el-input>
        </el-form-item>
        <el-form-item label="交房日期">
          <el-date-picker type="date" placeholder="选择日期" v-model="form.house.completeDate"></el-date-picker>
        </el-form-item>
        <el-form-item label="备注">
          <el-input type="textarea" :rows="3" v-model="form.house.remark"></el-input>
        </el-form-item>
      </el-form>

      <!--入住家庭弹出框-->
      <el-dialog
        title="输入家庭id"
        v-model="dialog.visible"
        width="30%">
        <el-input type="number" v-model="dialog.id"></el-input>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialog.visible = false">取 消</el-button>
            <el-popconfirm
              title="确定入住吗？"
              @confirm="liveHouse()"
            >
              <template #reference>
                <el-button type="primary">确 定</el-button>
              </template>
            </el-popconfirm>
          </span>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  let id = 0;

  export default {
    name: 'building',
    inject: ['reload'],
    data() {
      let _this = this;
      return {
        currentState: "",
        form: {
          currentName: '',
          currentId: 0, // 当前添加的元素所属的id
          isAdd: false, // 是否需要id项，用于添加和保存的转换
          flag: 0, //标志显示哪个详情页
          area: {},
          building: {},
          unit: {},
          house: {}
        },
        netData: {
          areas: [],
          buildings: [],
          units: [],
          houses: []
        },
        props: {
          // emitPath: false,
          checkStrictly: true,
          lazy: true,
          lazyLoad(node, resolve) {
            // console.log(node)
            const {
              level,
              value
            } = node;
            if (level == 1) {
              _this.getBuildingList(value).then(res => {
                if (res.data.code == 200) {
                  _this.netData.buildings = res.data.obj;
                  let buildings = res.data.obj.map(item => ({
                    value: item.id,
                    label: item.name,
                    leaf: false
                  }))
                  console.log(buildings)
                  resolve(buildings);
                }
                else {
                  this.$message.error("从服务器获取数据失败！")
                }
              })
            }
            else if (level == 2) {
              _this.$axios.get("/units?building_id=" + value).then(res => {
                if (res.data.code == 200) {
                  _this.netData.units = res.data.obj;
                  let units = res.data.obj.map(item => ({
                    value: item.id,
                    label: item.name,
                    leaf: false
                  }))
                  resolve(units);
                }
                else {
                  this.$message.error("从服务器获取数据失败！")
                }
              })
            }
            else if (level == 3) {
              _this.$axios.get("/houses?unit_id=" + value).then(res => {
                if (res.data.code == 200) {
                  _this.netData.houses = res.data.obj;
                  let houses = res.data.obj.map(item => ({
                    value: item.id,
                    label: item.houseNum,
                    leaf: true
                  }))
                  resolve(houses);
                }
                else {
                  this.$message.error("从服务器获取数据失败！")
                }
              })
            }
          }
        },
        // 级联数据
        options: [{
          value: 1,
          label: "天心小区"
        }, {
          value: 2,
          label: "雨花小区"
        }, {
          value: 3,
          label: "花园小区"
        },],
        dialog: {
          visible: false,
          id: '',
          name: ""
        }
      }
    },
    methods: {
      // 获取小区列表
      getAreaList() {
        this.$axios.get("/areas").then(res => {
          if (res.data.code == 200) {
            this.netData.areas = res.data.obj;
            let index = 0;
            let areas = res.data.obj.map(item => ({
              index: index++,
              value: item.id,
              label: item.name,
              leaf: false
            }))
            this.options = areas;
          }
        })
      },
      // 获取小区列表回调
      getBuildingList(areaId) {
        return this.$axios.get("/buildings?area_id=" + areaId);
      },

      // 级联选择器点击事件
      panelClick(e) {
        // console.log(e)
        if (e.length == 1) {
          this.currentState = 'editArea';
          this.form.currentId = e[0];
          this.getAreaById(e[0]);
        }
        else if (e.length == 2) {
          this.currentState = 'editBuilding';
          this.form.currentId = e[1];
          this.getBuildingById(e[1]);
        }
        else if (e.length == 3) {
          this.currentState = 'editUnit';
          this.form.currentId = e[2];
          this.getUnitById(e[2]);
        }
        else if (e.length == 4) {
          this.currentState = 'editHouse';
          this.getHouseById(e[3]);
        }
      },
      /* 根据小区id获取小区信息 */
      getAreaById(id) {
        this.$axios.get("/area/" + id).then(res => {
          if (res.data.code == 200) {
            this.form.area = res.data.obj;
          }
        })
      },
      /* 保存已修改的小区信息 */
      saveArea() {
        const {
          area
        } = this.form;
        if (JSON.stringify(area) == "{}") {
          this.$message.error("请先选择小区！！");
        }
        else {
          this.$axios.put("/area", area).then(res => {
            if (res.data.code == 200) {
              this.$message.success("保存成功");
            }
          })
        }
      },
      /* 转到添加新小区 */
      toAddArea() {
        this.currentState = 'addArea';
        this.form.area = {};
      },
      /* 添加新小区 */
      addArea() {
        const {
          area
        } = this.form;
        if (JSON.stringify(area) == "{}") {
          this.$message.error("不能全部为空！！");
        }
        else {
          this.$axios.post("/area", area).then(res => {
            if (res.data.code == 200) {
              this.$message.success("添加成功");
              this.currentState = '';
            }
            else {
              this.$message.error("请填写必要信息！！");
            }
          })
        }
      },

      /* 根据楼栋id获取楼栋信息 */
      getBuildingById(id) {
        this.$axios.get("/building/" + id).then(res => {
          if (res.data.code == 200) {
            this.form.building = res.data.obj;
          }
        })
      },
      /* 保存已修改的楼栋信息 */
      saveBuilding() {
        const {
          building
        } = this.form;
        if (JSON.stringify(building) == "{}") {
          this.$message.error("请先选择楼栋！！");
        }
        else {
          this.$axios.put("/building", building).then(res => {
            if (res.data.code == 200) {
              this.$message.success("保存成功");
            }
          })
        }
      },
      /* 转到添加新楼栋 */
      toAddBuilding() {
        this.currentState = 'addBuilding';
        this.form.currentId = this.form.area.id;
        this.form.currentName = this.form.area.name;
        this.form.building = {};
      },
      /* 添加新楼栋 */
      addBuilding() {
        const {
          building
        } = this.form;
        if (JSON.stringify(building) == "{}") {
          this.$message.error("不能全部为空！！");
        }
        else {
          building.area = this.form.currentId;
          this.$axios.post("/building", building).then(res => {
            if (res.data.code == 200) {
              this.$message.success("添加成功");
              this.form.isAdd = false;
            }
            else {
              this.$message.error("请填写必要信息！！");
            }
          })
        }
      },
      /* 根据id获取单元信息 */
      getUnitById(id) {
        this.$axios.get("/unit/" + id).then(res => {
          if (res.data.code == 200) {
            this.form.unit = res.data.obj;
          }
        })
      },
      /* 转到添加单元信息 */
      toAddUnit() {
        this.currentState = 'addUnit';
        this.form.currentId = this.form.building.id;
        this.form.currentName = this.form.building.name;
        this.form.unit = {};
      },
      /* 添加新单元 */
      addUnit() {
        const {
          unit
        } = this.form;
        if (JSON.stringify(unit) == "{}") {
          this.$message.error("不能全部为空！！");
        }
        else {
          unit.building = this.form.currentId;
          this.$axios.post("/unit", unit).then(res => {
            if (res.data.code == 200) {
              this.$message.success("添加成功");
              this.form.isAdd = false;
            }
            else {
              this.$message.error("请填写必要信息！！");
            }
          })
        }
      },
      /* 修改单元 */
      saveUnit() {
        const {
          unit
        } = this.form;
        if (JSON.stringify(unit) == "{}") {
          this.$message.error("请先选择单元！！");
        }
        else {
          this.$axios.put("/unit", unit).then(res => {
            if (res.data.code == 200) {
              this.$message.success("保存成功");
            }
          })
        }
      },

      /* 根据住房id获取住房信息 */
      getHouseById(id) {
        this.$axios.get("/house/" + id).then(res => {
          if (res.data.code == 200) {
            this.form.house = res.data.obj;
          }
        })
      },

      /* 转到添加住房信息 */
      toAddHouse() {
        this.currentState = 'addHouse';
        this.form.currentId = this.form.unit.id;
        this.form.currentName = this.form.unit.name;
        this.form.house = {};
      },
      /* 添加新住房 */
      addHouse() {
        const {
          house
        } = this.form;
        if (JSON.stringify(house) == "{}") {
          this.$message.error("不能全部为空！！");
        }
        else {
          /* 根据单元id获取小区id和楼栋id */
          const unitId = this.form.currentId;
          this.$axios.get("/unit/key?unit_id=" + unitId)
            .then(res => {
              if (res.data.code == 200) {
                house.buildingNum = res.data.obj.building_id;
                house.areaId = res.data.obj.area_id;
                house.unitNum = unitId;
                /* 添加住房请求 */
                this.$axios.post("/house", house).then(res => {
                  if (res.data.code == 200) {
                    this.$message.success("添加成功");
                    this.form.isAdd = false;
                  }
                  else {
                    this.$message.error("请填写必要信息！！");
                  }
                })
              }
            })

        }
      },
      /* 修改住房 */
      saveHouse() {
        const {
          house
        } = this.form;
        if (JSON.stringify(house) == "{}") {
          this.$message.error("请先选择住房！！");
        }
        else {
          this.$axios.put("/house", house).then(res => {
            if (res.data.code == 200) {
              this.$message.success("保存成功");
            }
          })
        }
      },
      // 打开入住界面
      toLiveHouse() {
        this.dialog.visible = true;
      },
      // 进行入住
      liveHouse() {
        const {house} = this.form;
        house.familyId = this.dialog.id;
        house.houseState = "已入住";
        this.$axios.put("/house", house).then(res => {
          if (res.data.code == 200) {
            this.$message.success("入住成功");
          }
        })
        this.dialog.visible = false;
      },
    },
    components: {},
    created() {
      this.getAreaList();
    }
  }
</script>

<style>
  .myform-header {
    padding: 20px;
  }
</style>
